<template>
  <div>
    <el-tag>粘窗</el-tag>
    <el-checkbox @change="clickToChange()">需要</el-checkbox>
    <br/>
      <el-select v-model="zhan.zhonglei" :disabled="disable"
                 placeholder="请选择" class="length1" size="small">
        <el-option v-for="(item) in option.zhonglei" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <span>胶片面积(单位:cm):</span>
      <el-input v-model="zhan.chang" :disabled="disable"
                placeholder="请输入长" size="small" class="length"></el-input>
      <el-input v-model="zhan.kuan" :disabled="disable"
                placeholder="请输入宽" size="small" class="length"></el-input>
      <br/>
      <span>胶片厚度:</span>
      <el-select v-model="zhan.houdu" :disabled="disable"
                 placeholder="请选择" class="length" size="small">
        <el-option v-for="(item) in option.houdu" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <input v-model.lazy="zhan.houdu" placeholder="厚度" class="length"
             v-if="zhan.houdu ==='自填'"></input>
    <br/>
    <template v-if="getRole()">
    <el-tag type="warning" class="cost" v-if="!disable">成本: {{computeCost()}}</el-tag>
      <el-tag type="warning" class="cost" v-else>成本: </el-tag>
    </template>
    </div>
</template>

<script>
export default {
  name: 'Zhanchuang',
  props: ['Q', 'x', 'y', 'm', 'confirm'],
  data () {
    return {
      disable: true,
      zhan: {
        zhonglei: '',
        houdu: '',
        chang: '',
        kuan: ''
      },
      option: {
        zhonglei: ['纸卡窗', '纸卡对线窗', '坑盒窗', '坑盒对线窗'],
        houdu: [0.08, 0.1, 0.12, 0.15, 0.3, 0.35, '自填']
      }
    }
  },
  methods: {
    computeCost () {
      let q = parseInt(this.Q)
      let m = parseInt(this.m)
      let price = 0
      let priceStr = ''
      let s = parseInt(this.zhan.chang) * parseInt(this.zhan.kuan) / Math.pow(10, 6)
      let b = parseInt(this.zhan.houdu)
      switch (this.zhan.zhonglei) {
        case '纸卡窗':
          price = 0.01 + 2.7 * b * s
          priceStr = `0.01 + 2.7 × ${parseInt(this.zhan.chang)} × ${parseInt(this.zhan.kuan)} × ${b} × (10^-6)`
          break
        case '纸卡对线窗':
          price = 0.02 + 2.7 * b * s
          priceStr = `0.02 + 2.7 × ${parseInt(this.zhan.chang)} × ${parseInt(this.zhan.kuan)} × ${b} × (10^-6)`
          break
        case '坑盒窗':
          price = 0.03 + 2.7 * b * s
          priceStr = `0.03 + 2.7 × ${parseInt(this.zhan.chang)} × ${parseInt(this.zhan.kuan)} × ${b} × (10^-6)`
          break
        case '坑盒对线窗':
          price = 0.06 + 2.7 * b * s
          priceStr = `0.06 + 2.7 × ${parseInt(this.zhan.chang)} × ${parseInt(this.zhan.kuan)} × ${b} × (10^-6)`
          break
      }
      let cost = price * m * q <= 200 ? 200 : price * m * q
      let costStr = price * m * q <= 200 ? `200` : `${priceStr} × ${m} × ${q} = ${cost}`
      return costStr
    },
    clickToFin () {
      if (!this.disable) this.$emit('transferToFather', 'zhanchuang', this.zhan)
    },
    clickToChange () {
      this.disable = !this.disable
    },
    getRole () {
      return sessionStorage.getItem('roleType') === '1'
    }
  },
  watch: {
    confirm (nV, oV) {
      if (nV !== oV) this.clickToFin()
    }
  }
}
</script>

<style scoped>
.length{
  width: 100px;
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px;
}

.length1 {
  width: 120px;
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px;
}
.cost {
  margin-top: 10px;
}
</style>
